import React from "react";
import styles from "./index.module.less";
import { profile } from "@depjs/storage";
import { deleteTheChatMessageAction } from "@redux/actions02";
import { connect } from "react-redux";
import socket from "@depjs/socketClient";

const ContextMenu = (props) => {
    const { position, isDisplay, message, deleteTheChatMessageAction } = props;

    const handleCopy = async () => {
        /**
         * 把消息内容以文本形式存放到粘贴板
         * 需要注意，此处复制的内容，如果想作为消息进行发送，需要点击自定义的粘贴按钮，这样才有效
         * 因为在编辑区只改写了右键的粘贴功能，没有改写Ctrl + V的粘贴功能
         */
        await navigator.clipboard.writeText(message.content);
    };

    return (
        <div
            className={`${styles.context_menu} ${isDisplay ? "" : styles.hide}`}
            style={{ top: `${position.y}px`, left: `${position.x}px` }}
        >
            {message.messageType === "BIGEMOJI" ? <p>添加到表情</p> : null}
            {message.messageType === "BIGEMOJI" ? null : (
                <p onClick={handleCopy}>复制</p>
            )}
            <p>转发...</p>
            {Date.now() - message.date < 2 * 60 * 1000 &&
            message?.from?.userName === profile.userName ? (
                <p
                    onClick={() => {
                        socket.emit("i recalled a chat message", message);
                    }}
                >
                    撤回
                </p>
            ) : null}
            {message?.from?.userName === profile.userName ? (
                <p
                    onClick={() => {
                        deleteTheChatMessageAction(
                            message.messageId,
                            message.to.userName
                        );
                    }}
                >
                    删除
                </p>
            ) : null}
            {message.messageType === "IMAGE" ? <p>另存为...</p> : null}
        </div>
    );
};

export default connect((state) => state, { deleteTheChatMessageAction })(
    ContextMenu
);
